<template>
	<!-- 薪酬管理页面 -->
	<div class="page">
		<!-- 搜索页面 -->
		<el-form ref="salaryInfoSearch" :model="salaryInfoSearch" size="small" :inline="true" class="query-form">
			<el-form-item>
				<el-input size="small" autocomplete="off" v-model="salaryInfoSearch.name" placeholder="姓名"></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="salaryInfoSearch.office" placeholder="部门" style="width: 100%">
					<el-option v-for="item in optionsOffice" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="salaryInfoSearch.postName" placeholder="岗位" style="width: 100%">
					<el-option v-for="item in optionsJobs" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-date-picker style="width: 100%" v-model="salaryInfoSearchTiem" type="monthrange" range-separator="-"
					format="yyyy-MM" value-format="yyyy-MM" start-placeholder="开始月份" @change="getSTime"
					end-placeholder="结束月份">
				</el-date-picker>
			</el-form-item>
			<el-form-item style="float: right">
				<el-button size="small" type="primary" @click="searchSalary()">查询</el-button>
				<el-button size="small" style="margin-left: 10px" @click="resetsearchUsers()">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 内容页面 -->
		<div class="bg-white top">
			<!-- 按钮 -->
			<div style="display: flex">
				<el-button size="small" type="primary" icon="el-icon-circle-close" @click="SalaryByUser_add = true">添加
				</el-button>
				<el-button size="small" type="warning" icon="el-icon-circle-close" @click="add_out()">下载模板</el-button>
				<el-button size="small" type="danger" icon="el-icon-delete" @click="deleteCar()"
					:disabled="this.checkSalaryNum == ''">删除</el-button>
				<div style="margin-left: 10px">
					<el-upload :action="`${this.$http.BASE_URL}/sys/person/importSalary`" :show-file-list="false"
						:headers="{ token: $cookie.get('token') }" :on-success="
              (response, file, fileList) => {
                files = fileList
                  .map(
                    (item) => (item.response && item.response.url) || item.url
                  )
                  .join('|');
                $message.success(`导入成功`);
                this.getSalaryManagement();
              }
            " :limit="1" :on-exceed="
              (files, fileList) => {
                $message.warning(
                  `当前限制选择 1 个文件，本次选择了 ${
                    files.length
                  } 个文件，共选择了 ${files.length + fileList.length} 个文件`
                );
              }
            ">
						<el-button size="small" type="success" icon="el-icon-circle-close">导入</el-button>
					</el-upload>
				</div>
			</div>
			<el-table ref="salaryManagement" :data="salaryManagement" @selection-change="selectioSalaryChang"
				height="calc(100% - 80px)" size="small" :cell-style="cellStyle" style="border: 1px solid #d6cfe2"
				row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" class="table"
				:header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName" show-summary
				:summary-method="getSummaries" v-loading="salaryLoading">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="salyear" label="日期" align="center" fixed="left" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="user.name" label="姓名" fixed="left" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="基本信息">
					<el-table-column prop="idnumber.name" label="部门" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="job" label="岗位" align="center" show-overflow-tooltip></el-table-column>
				</el-table-column>
				<el-table-column label="考勤 (天)">
					<el-table-column prop="shouldattendanceday" label="应出勤" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="traveldays" label="出差" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="leavedays" label="请假" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column prop="realityattendanceday" label="实际出勤" align="center" show-overflow-tooltip>
					</el-table-column>
				</el-table-column>
				<el-table-column label="固定工资 (元)">
					<el-table-column prop="basepay" align="center" label="基本工资" show-overflow-tooltip></el-table-column>
					<el-table-column prop="postwage" align="center" label="岗位工资" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="meritpay" align="center" label="绩效工资" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="combinedbasic" label="固定合计" align="center" show-overflow-tooltip>
					</el-table-column>
				</el-table-column>
				<el-table-column label="福利待遇 (元)">
					<el-table-column prop="senioritypay" label="工龄工资" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="mealallowance" label="餐费补助" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="trafficallowance" label="交通补助" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="commission" label="业务提成" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="travelallowance" label="出差补助" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="attendancebonus" label="全勤奖" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="overtime" align="center" label="加班费" show-overflow-tooltip></el-table-column>
					<el-table-column prop="communicatesubsidy" label="通信补助" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="othersupport" label="其他补助" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="totalwelfarebenefits" label="福利合计" align="center" show-overflow-tooltip>
					</el-table-column>
				</el-table-column>
				<el-table-column prop="shouldsalary" label="应发工资(元)" width="100px" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="扣减项目 (元)">
					<el-table-column align="center" prop="housingprovidentfund" label="公积金" show-overflow-tooltip>
					</el-table-column>
					<el-table-column align="center" prop="party" label="党费" show-overflow-tooltip></el-table-column>
					<el-table-column align="center" prop="basicoldagepension" label="基本养老" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="basicmedicalcare" label="基本医疗" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="unemploymentinsurance" label="失业保险" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="individualincometax" label="所得税" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="workInjury" label="工伤" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="lately" label="迟到" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column prop="leaveearly" label="早退" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="absenteeism" label="旷工" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="otherdeductions" label="其他扣款" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="deductionscombined" label="扣减合计" align="center" show-overflow-tooltip>
					</el-table-column>
				</el-table-column>
				<el-table-column label="企业保险 (元)">
					<el-table-column prop="providentFund" label="企业公积金" width="110px" align="center"
						show-overflow-tooltip></el-table-column>
					<el-table-column prop="pension" label="企业养老" width="110px" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="medical" label="企业医疗" align="center" width="110px" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="unemployment" label="企业失业" align="center" width="110px"
						show-overflow-tooltip></el-table-column>
					<el-table-column prop="businessInjury" label="企业工伤" align="center" width="110px"
						show-overflow-tooltip></el-table-column>
					<el-table-column prop="otherFee" label="企业其他费用" width="110px" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="totalFees" label="企业费用合计" width="110px" align="center" show-overflow-tooltip>
					</el-table-column>
				</el-table-column>
				<el-table-column prop="netpayroll" label="实发工资(元)" width="100px" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="ispay" label="状态" width="100px" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
					  {{$dictUtils.getDictLabel("salary_paytype", scope.row.ispay)}}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="salaryHandleSize" @current-change="salaryHandleCurrent"
				:current-page.sync="salaryInfoPageNo" :page-size="salaryInfoPageSize"
				layout="total, prev, pager, next, jumper" :total="salaryInfoTotal" style="margin: 1rem 0">
			</el-pagination>
			<!-- 新增工资 -->
			<div>
				<el-dialog title="添加薪资信息" :visible.sync="SalaryByUser_add" width="70%">
					<el-form ref="addSalaryByUser" :model="addSalaryByUser" :rules="rule" size="small">
						<el-row style="margin-bottom: 10px">
							<el-col><span style="font-size: 14px; color: #2a8bd8"><i
										class="el-icon-menu"></i>基本信息：</span></el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="8">
								<el-form-item prop="salyear" label="日期：" label-width="110px">
									<el-date-picker v-model="addSalaryByUser.salyear" format="yyyy-MM"
										value-format="yyyy-MM" type="month" placeholder="选择日期" style="width: 100%">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item prop="user" label="姓名：" label-width="110px">
									<el-select v-model="addSalaryByUser.user" placeholder="请选择" @change="userChang"
										style="width: 100%">
										<el-option v-for="item in userIdList" :label="item.name" :value="item.id"
											:key="item.id"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item prop="job" label="岗位：" label-width="110px">
									<el-input v-model="addSalaryByUser.job" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="8">
								<el-form-item prop="idnumber" label="部门" label-width="110px">
									<el-input v-model="addSalaryByUser.idnumber" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item prop="idcard" label="身份证号：" label-width="110px">
									<el-input v-model="addSalaryByUser.idcard" maxlength="18" autocomplete="off">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item prop="phone" label="电话：" label-width="110px">
									<el-input v-model="addSalaryByUser.phone" maxlength="11" autocomplete="off">
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="8">
								<el-form-item prop="bankofdeposit" label="银行开户行：" label-width="110px">
									<el-input v-model="addSalaryByUser.bankofdeposit" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item prop="bankaccount" label="银行卡号：" label-width="110px">
									<el-input v-model="addSalaryByUser.bankaccount" maxlength="18" autocomplete="off">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item prop="banknumber" label="银行行号：" label-width="110px">
									<el-input v-model="addSalaryByUser.banknumber" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row style="margin: 10px 0">
							<el-col><span style="font-size: 14px; font-weight: 500; color: #2a8bd8"><i
										class="el-icon-menu"></i>考勤 (天)：</span></el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="4">
								<el-form-item prop="shouldattendanceday" label="应出勤：" label-width="110px">
									<el-input v-model="addSalaryByUser.shouldattendanceday" autocomplete="off">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="traveldays" label="出差：" label-width="110px">
									<el-input v-model="addSalaryByUser.traveldays" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="leavedays" label="请假：" label-width="110px">
									<el-input v-model="addSalaryByUser.leavedays" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="realityattendanceday" label="实际出勤：" label-width="110px">
									<span>{{
                      Number(
                        this.addSalaryByUser.shouldattendanceday -
                          this.addSalaryByUser.traveldays -
                          this.addSalaryByUser.leavedays
                      )
                    }}
										(天)</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row style="margin: 10px 0">
							<el-col><span style="font-size: 14px; font-weight: 500; color: #2a8bd8"><i
										class="el-icon-menu"></i>基本工资 (元)：</span></el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="4">
								<el-form-item prop="basepay" label="基本工资：" label-width="110px">
									<el-input v-model="addSalaryByUser.basepay" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="postwage" label="岗位工资：" label-width="110px">
									<el-input v-model="addSalaryByUser.postwage" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="meritpay" label="绩效工资：" label-width="110px">
									<el-input v-model="addSalaryByUser.meritpay" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="combinedbasic" label="基本合计：" label-width="110px">
									<span>￥{{
                      Number(this.addSalaryByUser.basepay) +
                      Number(this.addSalaryByUser.postwage) +
                      Number(this.addSalaryByUser.meritpay)
                    }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row style="margin: 10px 0">
							<el-col><span style="font-size: 14px; font-weight: 500; color: #2a8bd8"><i
										class="el-icon-menu"></i>福利待遇 (元)：</span></el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="4">
								<el-form-item prop="senioritypay" label="工龄工资：" label-width="110px">
									<el-input v-model="addSalaryByUser.senioritypay" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="mealallowance" label="餐费补助：" label-width="110px">
									<el-input v-model="addSalaryByUser.mealallowance" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="trafficallowance" label="交通补助：" label-width="110px">
									<el-input v-model="addSalaryByUser.trafficallowance" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="commission" label="业务提成：" label-width="110px">
									<el-input v-model="addSalaryByUser.commission" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="travelallowance" label="出差补助：" label-width="110px">
									<el-input v-model="addSalaryByUser.travelallowance" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="attendancebonus" label="全勤奖：" label-width="110px">
									<el-input v-model="addSalaryByUser.attendancebonus" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="4">
								<el-form-item prop="overtime" label="加班费：" label-width="110px">
									<el-input v-model="addSalaryByUser.overtime" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="communicatesubsidy" label="通信补助：" label-width="110px">
									<el-input v-model="addSalaryByUser.communicatesubsidy" autocomplete="off">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="othersupport" label="其他补助：" label-width="110px">
									<el-input v-model="addSalaryByUser.othersupport" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="totalwelfarebenefits" label="福利合计：" label-width="110px">
									<span>￥{{
                      Number(this.addSalaryByUser.senioritypay) +
                      Number(this.addSalaryByUser.mealallowance) +
                      Number(this.addSalaryByUser.trafficallowance) +
                      Number(this.addSalaryByUser.commission) +
                      Number(this.addSalaryByUser.travelallowance) +
                      Number(this.addSalaryByUser.attendancebonus) +
                      Number(this.addSalaryByUser.overtime) +
                      Number(this.addSalaryByUser.communicatesubsidy) +
                      Number(this.addSalaryByUser.othersupport)
                    }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row style="margin: 10px 0">
							<el-col><span style="font-size: 14px; font-weight: 500; color: #2a8bd8"><i
										class="el-icon-menu"></i>扣减合计 (元)：</span></el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="4">
								<el-form-item prop="basicoldagepension" label="基本养老：" label-width="110px">
									<el-input v-model="addSalaryByUser.basicoldagepension" autocomplete="off">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="basicmedicalcare" label="基本医疗：" label-width="110px">
									<el-input v-model="addSalaryByUser.basicmedicalcare" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="unemploymentinsurance" label="失业保险：" label-width="110px">
									<el-input v-model="addSalaryByUser.unemploymentinsurance" autocomplete="off">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="housingprovidentfund" label="公积金：" label-width="110px">
									<el-input v-model="addSalaryByUser.housingprovidentfund" autocomplete="off">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="individualincometax" label="所得税：" label-width="110px">
									<el-input v-model="addSalaryByUser.individualincometax" autocomplete="off">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="lately" label="迟到：" label-width="110px">
									<el-input v-model="addSalaryByUser.lately" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="4">
								<el-form-item prop="leaveearly" label="早退：" label-width="110px">
									<el-input v-model="addSalaryByUser.leaveearly" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="absenteeism" label="旷工：" label-width="110px">
									<el-input v-model="addSalaryByUser.absenteeism" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="party" label="党费：" label-width="110px">
									<el-input v-model="addSalaryByUser.party" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="workInjury" label="工伤：" label-width="110px">
									<el-input v-model="addSalaryByUser.workInjury" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="otherdeductions" label="其他扣款：" label-width="110px">
									<el-input v-model="addSalaryByUser.otherdeductions" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="deductionscombined" label="扣减合计：" label-width="110px">
									<span>￥{{
                      Number(this.addSalaryByUser.basicoldagepension) +
                      Number(this.addSalaryByUser.basicmedicalcare) +
                      Number(this.addSalaryByUser.unemploymentinsurance) +
                      Number(this.addSalaryByUser.housingprovidentfund) +
                      Number(this.addSalaryByUser.individualincometax) +
                      Number(this.addSalaryByUser.lately) +
                      Number(this.addSalaryByUser.leaveearly) +
                      Number(this.addSalaryByUser.absenteeism) +
                      +Number(this.addSalaryByUser.party) +
                      Number(this.addSalaryByUser.workInjury) +
                      Number(this.addSalaryByUser.otherdeductions)
                    }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<!-- 新增的一项 -->
						<el-row style="margin: 10px 0">
							<el-col><span style="font-size: 14px; font-weight: 500; color: #2a8bd8"><i
										class="el-icon-menu"></i>企业保险 (元)：</span></el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="4">
								<el-form-item prop="providentFund" label="企业公积金：" label-width="110px">
									<el-input v-model="addSalaryByUser.providentFund" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="pension" label="企业养老：" label-width="110px">
									<el-input v-model="addSalaryByUser.pension" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="medical" label="企业医疗：" label-width="110px">
									<el-input v-model="addSalaryByUser.medical" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="unemployment" label="企业失业：" label-width="110px">
									<el-input v-model="addSalaryByUser.unemployment" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="businessInjury" label="企业工伤：" label-width="110px">
									<el-input v-model="addSalaryByUser.businessInjury" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item prop="otherFee" label="企业其他费用：" label-width="110px">
									<el-input v-model="addSalaryByUser.otherFee" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="4">
								<el-form-item prop="totalFees" label="企业费用合计：" label-width="110px">
									<span>￥{{
                      Number(this.addSalaryByUser.providentFund) +
                      Number(this.addSalaryByUser.pension) +
                      Number(this.addSalaryByUser.medical) +
                      Number(this.addSalaryByUser.unemployment) +
                      Number(this.addSalaryByUser.businessInjury) +
                      Number(this.addSalaryByUser.otherFee)
                    }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row style="margin-top: 16px; font-weight: 500">
							<el-col :span="6">
								<el-form-item prop="shouldsalary" label="应发工资：" label-width="110px">
									<span>￥{{
                      Number(this.addSalaryByUser.basepay) +
                      Number(this.addSalaryByUser.postwage) +
                      Number(this.addSalaryByUser.meritpay) +
                      (Number(this.addSalaryByUser.senioritypay) +
                        Number(this.addSalaryByUser.mealallowance) +
                        Number(this.addSalaryByUser.trafficallowance) +
                        Number(this.addSalaryByUser.commission) +
                        Number(this.addSalaryByUser.travelallowance) +
                        Number(this.addSalaryByUser.attendancebonus) +
                        Number(this.addSalaryByUser.overtime) +
                        Number(this.addSalaryByUser.communicatesubsidy) +
                        Number(this.addSalaryByUser.othersupport))
                    }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item prop="netpayroll" label="实发工资：" label-width="110px">
									<span>￥{{
                      Number(this.addSalaryByUser.basepay) +
                      Number(this.addSalaryByUser.postwage) +
                      Number(this.addSalaryByUser.meritpay) +
                      (Number(this.addSalaryByUser.senioritypay) +
                        Number(this.addSalaryByUser.mealallowance) +
                        Number(this.addSalaryByUser.trafficallowance) +
                        Number(this.addSalaryByUser.commission) +
                        Number(this.addSalaryByUser.travelallowance) +
                        Number(this.addSalaryByUser.attendancebonus) +
                        Number(this.addSalaryByUser.overtime) +
                        Number(this.addSalaryByUser.communicatesubsidy) +
                        Number(this.addSalaryByUser.othersupport)) -
                      (Number(this.addSalaryByUser.basicoldagepension) +
                        Number(this.addSalaryByUser.basicmedicalcare) +
                        Number(this.addSalaryByUser.unemploymentinsurance) +
                        Number(this.addSalaryByUser.housingprovidentfund) +
                        Number(this.addSalaryByUser.individualincometax) +
                        Number(this.addSalaryByUser.lately) +
                        Number(this.addSalaryByUser.leaveearly) +
                        Number(this.addSalaryByUser.absenteeism) +
                        Number(this.addSalaryByUser.party) +
                        Number(this.addSalaryByUser.workInjury) +
                        Number(this.addSalaryByUser.otherdeductions))
                    }}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="SalaryByUser_add = false">取 消</el-button>
						<el-button size="small" type="primary" @click="addSalarys()">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import tableStyles from "../../../../utils/mixins.js";
	import {
		colorSpan
	} from "../../sys/dashboard/echarts/default.js";

	export default {
		mixins: [tableStyles],
		data() {
			var bankAccountValid = (rule, value, callback) => {
				const strBin =
					"10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
				if (!value) {
					return callback(new Error("收款账户不能为空"));
				} else if (!Number.isInteger(+value)) {
					callback(new Error("银行卡号必须全为数字"));
				} else if (value.trim().length < 12 || value.trim().length > 19) {
					callback(new Error("银行卡号长度必须在12到19之间"));
				} else if (strBin.indexOf(value.substring(0, 2)) === -1) {
					callback(new Error("银行卡号开头6位不符合规范"));
				} else {
					callback();
				}
			};
			return {
				// 公司ID
				companyId: "",
				//部门下拉选
				optionsOffice: [],
				//岗位下拉选
				optionsJobs: [],
				//顶部搜索
				salaryInfoSearchTiem: "",
				salaryInfoSearch: {
					office: "",
					name: "",
					postName: "",
					timeOne: "",
					timeTwo: "",
				},
				//批量删除
				checkSalaryNum: [],
				// 导入
				files: "", //导入的文件
				// 薪酬管理存的数据
				salaryManagement: [],
				salaryLoading: null, //加载表格
				// 分页
				salaryInfoPageNo: 1,
				salaryInfoPageSize: 10,
				salaryInfoTotal: 0,

				SalaryByUser_add: false,
				userIdList: [], //新增工资姓名下拉选
				addSalaryByUser: {
					//添加的字段
					salyear: "", //工资年月
					user: "", //姓名
					idnumber: "", // 部门
					job: "", //岗位
					idcard: "", //身份证号
					phone: "", //电话
					bankaccount: "", //银行卡号
					bankofdeposit: "", //银行开户行
					banknumber: "", //银行行号

					shouldattendanceday: "", //应出勤
					traveldays: "", //出差天数
					leavedays: "", //请假天数
					realityattendanceday: "", //实际出勤天数

					basepay: "", //基本工资
					postwage: "", //岗位工资
					meritpay: "", //绩效工资
					combinedbasic: "", //基本合计

					senioritypay: "", //工龄工资
					mealallowance: "", //餐费
					trafficallowance: "", //交通
					commission: "", //业务提成
					travelallowance: "", //出差补助
					attendancebonus: "", //全勤奖
					overtime: "", //加班费
					communicatesubsidy: "", //通信补助
					othersupport: "", //其他补助
					totalwelfarebenefits: "", //福利合计

					basicoldagepension: "", //基本养老
					basicmedicalcare: "", //基本医疗
					unemploymentinsurance: "", //失业保险
					housingprovidentfund: "", //住房公积金
					individualincometax: "", //个人所得税
					lately: "", //迟到扣款
					leaveearly: "", //早退扣款
					absenteeism: "", //旷工扣款
					party: "", //党费
					workInjury: "", //工伤扣款
					otherdeductions: "", //其他扣款
					deductionscombined: "", //扣减合计

					providentFund: "", //企业公积金
					pension: "", //企业养老
					medical: "", //企业医疗
					unemployment: "", //企业失业
					businessInjury: "", //企业工伤
					otherFee: "", //企业其他费用
					totalFees: "", //企业费用合计

					shouldsalary: "", //应发工资
					netpayroll: "", //实发工资
				},
				//校验正确
				rule: {
					salyear: {
						required: true,
						message: "请选择日期",
						trigger: "blur"
					},
					idnumber: {
						required: true,
						message: "请选择部门"
					},
					job: {
						required: true,
						message: "请输入岗位",
						trigger: "blur"
					},
					idcard: [{
							required: true,
							message: "请输入身份证号",
							trigger: "blur"
						},
						{
							min: 15,
							max: 18,
							message: "请输入正确的身份证",
							trigger: "blur"
						},
						{
							required: true,
							pattern: /^[1-9][0-9]{5}(18|19|20)[0-9]{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)[0-9]{3}([0-9]|(X|x))/,
							message: "请输入正确的身份证",
							trigger: "blur",
						},
					],
					phone: [{
							required: true,
							message: "请输入电话",
							trigger: "blur"
						},
						{
							min: 11,
							max: 11,
							message: "请输入正确的电话",
							trigger: "blur"
						},
						{
							required: true,
							pattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/,
							message: "请输入正确的电话",
							trigger: "blur",
						},
					],
					bankaccount: {
						required: true,
						trigger: "blur",
						validator: bankAccountValid,
					},
					bankofdeposit: {
						required: true,
						message: "请输入银行开户行",
						trigger: "blur",
					},
					shouldattendanceday: {
						required: true,
						message: "请输入应出勤",
						trigger: "blur",
					},
					traveldays: {
						required: true,
						message: "请输入出差",
						trigger: "blur"
					},
					leavedays: {
						required: true,
						message: "请输入请假",
						trigger: "blur"
					},
					basepay: {
						required: true,
						message: "请输入基本工资",
						trigger: "blur"
					},
					postwage: {
						required: true,
						message: "请输入岗位工资",
						trigger: "blur",
					},
					meritpay: {
						required: true,
						message: "请输入绩效工资",
						trigger: "blur",
					},
				},
			};
		},
		updated() {
			this.$nextTick(() => {
				this.$refs['salaryManagement'].doLayout();
			})
		},
		//接收ID参数
		created() {
			this.companyId = this.$route.query.id;
		},
		mounted() {
			this.getSalaryManagement();
			this.getSelectSalaryOffice();
			this.getSelectSalaryJobs();
			this.get_userIdList();
		},
		methods: {
			//进来就获取数据
			getSalaryManagement() {
				this.salaryLoading = true;
				this.$http({
					url: "/sys/person/findSalary",
					method: "get",
					params: {
						pageNo: this.salaryInfoPageNo,
						pageSize: this.salaryInfoPageSize,
						companyId: this.companyId,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.showSummary = true;
						this.salaryManagement = data.salaryList;
						this.salaryInfoTotal = data.totalCount;
					}
					this.salaryLoading = false;
				});
			},
			// 查询部门下拉选
			getSelectSalaryOffice() {
				this.$http({
					url: "/sys/person/findOffice",
					method: "get",
					params: {
						companyId: this.companyId,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.optionsOffice = data.children;
					}
				});
			},
			// 查询岗位下拉选
			getSelectSalaryJobs() {
				this.$http({
					url: "/sys/person/findPostName",
					method: "get",
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.optionsJobs = data.postList;
					}
				});
			},
			//增加薪资的姓名下拉选
			get_userIdList() {
				this.$http({
					url: "/sys/person/findPerson",
					method: "get",
					params: {
						pageNo: this.salaryInfoPageNo,
						pageSize: this.salaryInfoPageSize,
						companyId: this.companyId,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.userIdList = data.userList;
					}
				});
			},
			// 处理选择的时间
			getSTime(val) {
				this.salaryInfoSearchTiem = val;
				this.salaryInfoSearch.timeOne = this.salaryInfoSearchTiem[0];
				this.salaryInfoSearch.timeTwo = this.salaryInfoSearchTiem[1];
			},
			//搜索薪酬管理
			searchSalary() {
				this.salaryLoading = true;
				this.$http({
					url: "/sys/person/searchSalary",
					method: "get",
					params: {
						pageNo: this.salaryInfoPageNo,
						pageSize: this.salaryInfoPageSize,
						companyId: this.companyId,
						...this.salaryInfoSearch,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.salaryManagement = data.list;
						this.salaryInfoTotal = data.totalCount;
						this.salaryLoading = false;
					} else {
						this.salaryManagement = [];
						this.salaryInfoTotal = 0;
						this.salaryLoading = false;
					}
				});
			},
			//重置搜索
			resetsearchUsers() {
				(this.salaryInfoSearchTiem = ""),
				(this.salaryInfoSearch = {
					office: "",
					name: "",
					postName: "",
					timeOne: "",
					timeTwo: "",
				}),
				this.getSalaryManagement();
			},
			//下载模板
			add_out() {
				window.location.href =
					"https://admin.dlyrl.com/admin/userfiles/1/userFiles/hr/eventxieban/eventXIeban/2021/2/系统工资模板.xlsx";
			},
			//删除
			deleteCar() {
				let ids = this.checkSalaryNum
					.map((item) => {
						return item.id;
					})
					.join(",");
				this.$confirm(`确定删除所选项吗?`, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.$http({
						url: "/sys/web/userinfo/delSalary",
						method: "post",
						params: {
							salaryIds: ids
						},
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg);
							this.getSalaryManagement();
						}
					});
				});
			},
			//点击选中的行的select
			selectioSalaryChang(val) {
				this.checkSalaryNum = val;
			},
			//合计方法
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = "总计";
						return;
					}

					const values = data.map((item) => Number(item[column.property]));

					if (!values.every((value) => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += " ";
					} else {
						sums[index] = " ";
					}
				});

				return sums;
			},
			//薪酬管理分页
			salaryHandleSize(val) {
				this.salaryInfoPageSize = val;
				this.salaryInfoPageNo = 1;
				this.getSalaryManagement();
			},
			salaryHandleCurrent(val) {
				this.salaryInfoPageNo = val;
				this.getSalaryManagement();
			},

			//选择完姓名自带数据
			userChang(data) {
				this.userIdList.forEach((val) => {
					if (val.id == data) {
						this.addSalaryByUser.idnumber = val.office.name;
						this.addSalaryByUser.job = val.post.name;
						this.addSalaryByUser.idcard = val.idCard;
						this.addSalaryByUser.phone = val.phone;
						this.addSalaryByUser.bankaccount = val.bankaccount;
						this.addSalaryByUser.bankofdeposit = val.bankofdeposit;
						this.addSalaryByUser.banknumber = val.banknumber;
					}
				});
			},
			//添加时执行的方法
			addSalarys() {
				this.$refs.addSalaryByUser.validate((valid) => {
					if (valid) {
						this.addSalaryByUser.realityattendanceday = Number(
							this.addSalaryByUser.shouldattendanceday -
							this.addSalaryByUser.traveldays -
							this.addSalaryByUser.leavedays
						);
						this.addSalaryByUser.combinedbasic =
							Number(this.addSalaryByUser.basepay) +
							Number(this.addSalaryByUser.postwage) +
							Number(this.addSalaryByUser.meritpay);
						this.addSalaryByUser.totalwelfarebenefits =
							Number(this.addSalaryByUser.senioritypay) +
							Number(this.addSalaryByUser.mealallowance) +
							Number(this.addSalaryByUser.trafficallowance) +
							Number(this.addSalaryByUser.commission) +
							Number(this.addSalaryByUser.travelallowance) +
							Number(this.addSalaryByUser.attendancebonus) +
							Number(this.addSalaryByUser.overtime) +
							Number(this.addSalaryByUser.communicatesubsidy) +
							Number(this.addSalaryByUser.othersupport);
						this.addSalaryByUser.deductionscombined =
							Number(this.addSalaryByUser.basicoldagepension) +
							Number(this.addSalaryByUser.basicmedicalcare) +
							Number(this.addSalaryByUser.unemploymentinsurance) +
							Number(this.addSalaryByUser.housingprovidentfund) +
							Number(this.addSalaryByUser.individualincometax) +
							Number(this.addSalaryByUser.lately) +
							Number(this.addSalaryByUser.leaveearly) +
							Number(this.addSalaryByUser.absenteeism) +
							+Number(this.addSalaryByUser.party) +
							Number(this.addSalaryByUser.workInjury) +
							Number(this.addSalaryByUser.otherdeductions);
						this.addSalaryByUser.totalFees =
							Number(this.addSalaryByUser.providentFund) +
							Number(this.addSalaryByUser.pension) +
							Number(this.addSalaryByUser.medical) +
							Number(this.addSalaryByUser.unemployment) +
							Number(this.addSalaryByUser.businessInjury) +
							Number(this.addSalaryByUser.otherFee);
						this.addSalaryByUser.shouldsalary =
							Number(this.addSalaryByUser.basepay) +
							Number(this.addSalaryByUser.postwage) +
							Number(this.addSalaryByUser.meritpay) +
							(Number(this.addSalaryByUser.senioritypay) +
								Number(this.addSalaryByUser.mealallowance) +
								Number(this.addSalaryByUser.trafficallowance) +
								Number(this.addSalaryByUser.commission) +
								Number(this.addSalaryByUser.travelallowance) +
								Number(this.addSalaryByUser.attendancebonus) +
								Number(this.addSalaryByUser.overtime) +
								Number(this.addSalaryByUser.communicatesubsidy) +
								Number(this.addSalaryByUser.othersupport));
						this.addSalaryByUser.netpayroll =
							Number(this.addSalaryByUser.basepay) +
							Number(this.addSalaryByUser.postwage) +
							Number(this.addSalaryByUser.meritpay) +
							(Number(this.addSalaryByUser.senioritypay) +
								Number(this.addSalaryByUser.mealallowance) +
								Number(this.addSalaryByUser.trafficallowance) +
								Number(this.addSalaryByUser.commission) +
								Number(this.addSalaryByUser.travelallowance) +
								Number(this.addSalaryByUser.attendancebonus) +
								Number(this.addSalaryByUser.overtime) +
								Number(this.addSalaryByUser.communicatesubsidy) +
								Number(this.addSalaryByUser.othersupport)) -
							(Number(this.addSalaryByUser.basicoldagepension) +
								Number(this.addSalaryByUser.basicmedicalcare) +
								Number(this.addSalaryByUser.unemploymentinsurance) +
								Number(this.addSalaryByUser.housingprovidentfund) +
								Number(this.addSalaryByUser.individualincometax) +
								Number(this.addSalaryByUser.lately) +
								Number(this.addSalaryByUser.leaveearly) +
								Number(this.addSalaryByUser.absenteeism) +
								Number(this.addSalaryByUser.party) +
								Number(this.addSalaryByUser.workInjury) +
								Number(this.addSalaryByUser.otherdeductions));
						this.$http({
							url: "/sys/web/userinfo/savaSalary",
							method: "post",
							params: {
								...this.addSalaryByUser,
							},
						}).then(({
							data
						}) => {
							if (data && data.success) {
								this.$message.success(data.msg);
								this.SalaryByUser_add = false;
								this.getSalaryManagement();
							}
						});
					}
				});
			},
		},
	};
</script>
